<template>
  <rm-layout-top splitcolor="white" :splitwidth=5 :fixsize=40 :canDrag=false>
    <template v-slot:fix>
      <div style="height:40px;border:1px solid #CCC">
        <div class="top-deal">
          <el-button @click.native="btnQuery" icon="el-icon-search" type="primary" :disabled="changeflag">查询</el-button>
          <el-button icon="el-icon-plus" @click.native="btnAdd" :disabled="changeflag">新增</el-button>
          <el-button icon="el-icon-delete" @click.native="btnDelete" :disabled="changeflag">删除</el-button>
          <el-button icon="el-icon-document" @click.native="btnSave" :disabled="!changeflag">保存</el-button>
          <el-button icon="el-icon-close" @click.native="btnCancel" :disabled="!changeflag">取消</el-button>
        </div>
      </div>
    </template>
    <rm-layout-right splitcolor="white" movingcolor="#00FFFF" :splitwidth=5 :fixsize=400>
      <template v-slot:fix>
        <div style="height:100%;text-align:center;">
          <div style="height:100%;border:1px solid #ccc;">
            <el-form :inline="true" @submit.native.prevent label-width="auto" ref="form_jbxx" :model="reportMark"
              :disabled="nodata">
              <table style="width:100%">
                <tr>
                  <td align="right">
                    <font color="#F56C6C">标记代码</font>
                  </td>
                  <td>
                    <el-input v-model="reportMark.markno" tyle="width:100%" @keyup.enter.native="nextFocus(2)"
                      @change="hasChange" ref="input1"></el-input>
                  </td>
                </tr>
                <tr>
                  <td align="right">
                    <font>标记说明</font>
                  </td>
                  <td>
                    <el-input v-model="reportMark.markname" tyle="width:100%" @keyup.enter.native="nextFocus(3)"
                      @change="hasChangeName" ref="input2"></el-input>
                  </td>
                </tr>
                <tr>
                  <td align="right">
                    <font>标记类别</font>
                  </td>
                  <td>
                    <rm-ddl-common ref="input3" datatype="seccode" kindno="reportmarkclass" dataname="标记类别"
                      v-model="reportMark.reportsignclass" width="100%" @keyup.enter.native="nextFocus(4)"
                      @change="hasChangeClass"></rm-ddl-common>
                  </td>
                </tr>
                <tr>
                  <td align="right">
                    <font>输入码</font>
                  </td>
                  <td>
                    <el-input v-model="reportMark.inputcode" ref="input4" clearable @change="hasChange"></el-input>
                  </td>
                </tr>
              </table>
            </el-form>
          </div>
        </div>
      </template>
      <div style="height:100%;width:100%;">
        <vxe-table :data.sync="tableData" :loading="loading" :select-config="{ reserve: true }"
          :sort-config="{ trigger: 'cell' }" border height="auto" highlight-current-row highlight-hover-column
          highlight-hover-row how-header-overflow ref="xTable" resizable show-overflow size="mini" stripe
          :row-class-name="RowClassName" @current-change="currentChangeEvent" :keyboard-config="keyConfig">
          <vxe-table-column field="markno" title="标记代码" width="80" header-align="center"></vxe-table-column>
          <vxe-table-column field="markname" title="标记说明" width="100" header-align="center"></vxe-table-column>
          <vxe-table-column field="reportsignclassname" title="标记类别" width="80" header-align="center"
            align="center"></vxe-table-column>
          <vxe-table-column field="inputcode" title="输入码" width="100" header-align="center"></vxe-table-column>
        </vxe-table>
      </div>
    </rm-layout-right>

  </rm-layout-top>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
export default {
  name: "LIS158",
  data() {
    return {
      tableData: [],
      reportMark: { markno: "", markname: "", reportsignclass: "", inputcode: "" },
      loading: false,
      lxTableRow: {},
      userno: this.$tool.getSession(this.$tool.loginuserno),
      keyConfig: {
        isDel: true,
        isTab: true,
        isEdit: false
      },
      AddData: [],
      ModData: [],
      changeflag: false,
      utype: "M",
      nodata: true
    };
  },
  created() {
    this.InitPage(); //初始化主列表
  },
  methods: {
    btnQuery() {
      this.InitPage();
    }, //页面初始化
    InitPage() {
      this.loading = true;
      this.$tool
        .request({
          url: "LIS/LIS1/LIS158",
          method: "post",
          data: {
            action: "query"
          }
        })
        .then(res => {
          console.log('11111111', res)
          if (res.errcode == "1") {
            this.tableData = res.data;
            if (this.tableData.length > 0) {
              this.nodata = false;
              if (this.reportMark.hasOwnProperty("markno") && this.reportMark.markno) {
                let rowindex = this.$refs.xTable.tableData.findIndex(item => item.markno == this.reportMark.markno);
                this.$refs.xTable.setCurrentRow(this.tableData[rowindex]);
              } else {
                this.$refs.xTable.setCurrentRow(this.tableData[0]);
                this.reportMark = XEUtils.clone(this.tableData[0], true);
                this.lxTableRow = this.tableData[0];
              }
            }
            this.ModData = [];
            this.AddData = [];
          } else {
            this.$alert("加载数据出错", "提示");
          }
          this.loading = false;
        })
        .catch(e => {
          this.loading = false;
          this.$alert(e);
        });
    },
    //行切换
    currentChangeEvent({ row, column }) {
      if (this.changeflag) {
        this.$refs.lxTable.setCurrentRow(this.lxTableRow);
        return false;
      } else {
        this.reportMark = XEUtils.clone(row, true);
        this.lxTableRow = row;
      }
    },
    //新增
    btnAdd() {
      this.reportMark = { markno: "", markname: "", inputcode: "", reportsignclass: "" };
      this.utype = "A";
      this.changeflag = true;
      this.nodata = false;
    },
    //删除
    btnDelete() {
      try {
        let delrow = this.$refs.xTable.getCurrentRow();
        if (delrow) {
          let msg = "确定删除该条记录吗？";
          if (delrow.reportname != "") {
            msg = "确定删除标记说明为：<span style='color:red'>" + delrow.markname + "</span>的记录吗？";
          }
          this.$confirm(msg, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            dangerouslyUseHTMLString: true,
            focusCancelButton: true
          })
            .then(() => {
              var alldatd = this.$refs.xTable.getTableData().fullData;
              var rowindex = alldatd.indexOf(delrow);
              this.utype = "D";
              this.saveRecord()
                .then(res => {
                  if (res.errcode == "1") {
                    this.$refs.xTable.remove(delrow);
                    this.$pub.message(this, "删除成功！", "success");
                    let havedata = this.$refs.xTable.getTableData().fullData;
                    if (havedata.length > 0) {
                      if (rowindex >= havedata.length) rowindex = havedata.length - 1;
                      let selectrow = havedata[rowindex];
                      this.$refs.xTable.setCurrentRow(selectrow).then(() => {
                        this.lxTableRow = selectrow;
                        this.reportMark = XEUtils.clone(selectrow, true);
                        this.$refs.xTable.scrollToRow(selectrow);
                      });
                    } else {
                      this.$refs.xTable.setCurrentRow(null);
                      this.reportMark = {};
                      this.lxTableRow = {};
                    }
                  } else {
                    this.$alert("数据读取失败！" + res.errmsg, "提示");
                  }
                })
                .catch(e => {
                  this.$alert(e);
                });
            })
            .catch(() => { });
        }
      } catch (e) {
        console.log("error", e);
      }
    },
    //保存
    btnSave() {
      this.saveRecord()
        .then(res => {
          if (res.errcode == "1") {
            this.changeflag = false;
            this.$pub.message(this, "保存成功！", "success");
            if (this.utype == "A") {
              if (this.AddData.indexOf(res.keyid) == -1) {
                this.AddData.push(res.keyid + "");
              }
              this.utype = "M";
              this.$refs.xTable.insertAt({ markno: this.reportMark.markno, markname: this.reportMark.markname, reportsignclass: this.reportMark.reportsignclass, reportsignclassname: this.reportMark.reportsignclassname, inputcode: this.reportMark.inputcode }, -1).then(({ row }) => {
                this.$refs.xTable.setCurrentRow(row);
                this.$refs.xTable.scrollToRow(row);
              });
            } else if (this.utype == "M") {
              if (this.ModData.indexOf(res.keyid) == -1) {
                this.ModData.push(res.keyid + "");
              }
              this.lxTableRow.markno = this.reportMark.markno;
              this.lxTableRow.markname = this.reportMark.markname;
              this.lxTableRow.reportsignclass = this.reportMark.reportsignclass;
              this.lxTableRow.reportsignclassname = this.reportMark.reportsignclassname;
              this.lxTableRow.inputcode = this.reportMark.inputcode;
              setTimeout(() => {
                this.$refs.xTable.setCurrentRow(this.lxTableRow);
              }, 10);
            }
          } else {
            this.$alert("数据读取失败！" + res.errmsg, "提示");
          }
        })
        .catch(e => {
          this.$alert(e);
        });
    },
    async saveRecord() {
      const res = await this.$tool.request({
        url: "LIS/LIS1/LIS158",
        method: "post",
        data: {
          action: "SaveRecord",
          newinfo: this.reportMark,
          oldinfo: this.lxTableRow,
          utype: this.utype
        }
      });
      return res;
    },
    btnCancel() {
      let selectRow = this.$refs.xTable.getCurrentRow();
      if (selectRow) {
        this.lxTableRow = selectRow;
        this.reportMark = XEUtils.clone(selectRow, true);
      } else {
        this.reportMark = {};
        this.lxTableRow = {};
      }
      this.changeflag = false;
    },
    // 回车切换输入框
    nextFocus(index) {
      // if (index > 5) return false;
      // var that = this;
      // var focusIndex = index + 1;
      // setTimeout(function() {
      //     if (index == 3) {
      //         that.$refs["input" + index].suggestions = [];
      //         that.$refs["input" + focusIndex].focus(); //所属菜单为disabled
      //         that.$refs["input" + focusIndex].select();
      //     } else {
      //         that.$refs["input" + focusIndex].focus();
      //         if (focusIndex == "5") {
      //             that.$refs["input" + focusIndex].select();
      //         }
      //     }
      // }, 1);
    },
    //行颜色
    RowClassName({ row, rowIndex }) {
      if (this.AddData.indexOf(row.markno + "") > -1) {
        return "row-new";
      }
      if (this.ModData.indexOf(row.markno + "") > -1) {
        return "row-modify";
      }
    },
    hasChange() {
      this.changeflag = true;
    },
    hasChangeClass(c, n, row) {
      this.reportMark.reportsignclassname = n;
      this.changeflag = true;
    },
    hasChangeName(val) {
      this.reportMark.inputcode = this.$pub.CreateInputcode(val, this, 20);
      this.changeflag = true;
    }
  }
};
</script>

<style scoped>
table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 15px;
  padding: 0px 2px 0px 5px;
}

.search-title {
  position: absolute;
}

.top-deal {
  right: 5px;
  position: absolute;
  top: 10px;
  display: flex;
  align-items: center;
}

::v-deep tr.vxe-body--row.row-new {
  color: #cc6600 !important;
}

::v-deep tr.vxe-body--row.row-modify {
  color: blue !important;
}

.el-input-number--small {
  width: 130px;
  line-height: 23px;
}

::v-deep .el-button.is-disabled {
  border: 0px;
  color: grey;
  background-color: #e6e6e6;
  font-weight: normal;
}</style>
